

.Panel {
  @color: rgb(37, 50, 77);
  @colorA:rgb(12, 23, 51);
  @classname: .panel-nav;
  min-width: 1500px;
  min-height: 100vh;
  color: #FFF;
  border-top:10px solid @colorA ;
  background-color: @colorA;

  @{classname} {
    height: 24px;
    display: flex;
    margin-top: 10px;
    justify-content: center;

  }
  .panel-quit{
    width: 80px;
    height: 24px;
    float: right;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    background-color: @color;
    margin:-25px 60px 0 0;
  }
  .panel-nav-center,
  .panel-nav-blank,
  .panel-nav-shade-left,
  .panel-nav-shade-right,
  .panel-nav-left,
  .panel-nav-right {
    background-color: rgb(37, 50, 77);

  }

  .panel-nav-center {
    width: 240px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin: 0 20px;
    display: flex;
    justify-content: space-between;
  }

  .panel-nav-blank,
  .panel-nav-shade-left,
  .panel-nav-shade-right {
    height: 5px;
    width: 60px;
    margin: 10px 10px;
    line-height: 24px;
  }

  .panel-nav-left,
  .panel-nav-right {
    width: 10px;
  }

  .panel-nav-left {
    float: left;
    transform: rotate(135deg);
  }

  .panel-nav-right {
    float: right;
    transform: rotate(45deg);
  }

  .panel-i-left,
  .panel-i-right {
    position: absolute;
    width: 0;
    height: 0;
    margin-top: 14px;
  }

  .panel-i-left {
    margin-right: 230px;
    border-right: 10px solid @color;
    border-left: 0 solid blue;
    border-top: 0 solid green;
    border-bottom: 10px solid @colorA;
  }

  .panel-i-right {
    margin-left: 230px;
    border-right: 0 solid blue;
    border-left: 10px solid @color;
    border-top: 0 solid green;
    border-bottom: 10px solid @colorA;
  }

  .panel-nav-shade-left {
    background-image: linear-gradient(to left, @color, @colorA);
  }

  .panel-nav-shade-right {
    background-image: linear-gradient(to right, @color, @colorA);
  }

  .panel-content {
    width: 1450px;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
  }

  .panel-left {
    width: 400px;
    height: 100%;
  }

  .panel-leftT,
  .panel-leftB,
  .panel-centerB,
  .panel-rightT,
  .panel-rightB {
    padding: 10px 20px;
    background-color: rgb(16, 32, 65);
  }

  .panel-leftT {
    height: 470px;
    margin-bottom: 15px;
  }

  .panel-leftHead,
  .panel-leftB,
  .panel-centerT,
  .panel-centerB,
  .panel-rightT,
  .panel-rightB {
    font-weight: 600;
    margin-bottom: 15px;
  }

  .panel-leftNav {
    display: flex;
    font-size: 13px;
    margin: 0 0 10px 42px;
    justify-content: space-around;
  }

  .panel-thread {
    margin-right: 10px;
  }

  .panel-leftContent {
    display: flex;
    font-size: 13px;
    margin-bottom: 10px;
    .panel-callData{
      width: 80px;
      text-align: center;
      margin-right: 6px;
    }
  }

  .panel-leftId {
    width: 25px;
    margin-right: 14px;
    text-align: center;
    background-color: red;
  }

  .panel-leftB {
    height: 180px;
  }

  .panel-center {
    width: 600px;
  }

  .panel-centerT {
    padding: 10px;
    height: 470px;
    .panel-timeDeta{
      text-align: center;
    }
  }

  .panel-centerB {
    height: 180px;
  }

  .panel-right {
    width: 400px;
  }

  .panel-rightT {
    height: 365px;
  }

  .panel-rightB {
    height: 285px;
  }

  .panel-ringP {
    height: 140px;
    display: flex;
    overflow: auto;
    justify-content: space-around;
  }
  .panel-ringP::-webkit-scrollbar-corner,
  .panel-ringP::-webkit-scrollbar-thumb,
  .panel-ringP::-webkit-scrollbar-track {      
  border-radius: 4px;
  }
  .panel-ringP::-webkit-scrollbar {
    background: rgb(12, 23, 51);
    width: 10px;
  }
  .panel-ringP::-webkit-scrollbar-thumb {
    background-color: rgb(48, 62, 88);
  }
  .panel-ringP::-webkit-scrollbar-corner,
  .panel-ringP::-webkit-scrollbar-track {
    background-color: rgba(180, 160, 120, 0.1);
    box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
}

  .panel-call,
  .panel-calls {
    display: flex;
  }

  .panel-callPic {
    margin-top: 25px;
  }

  .panel-calls {
    justify-content: space-around;
  }

  .panel-ent {
    font-size: 12px;
    margin-top: 22px;
    font-weight: 600;
  }

  .panel-callRight {
    width: 340px;
  }

  .panel-statistics {
    font-size: 14px;
    color: #8CE2F7;
  }

  .panel-num,
  .panel-nums {
    margin-right: 13px;
  }

  .panel-num,
  .panel-nums,
  .panel-numsS {
    font-size: 15px;
  }

  .panel-nums {
    color: rgb(147, 189, 139);
  }

  .panel-numsS {
    color: rgb(155, 101, 114);

  }
}
